<template>
<div class="category-container" overflow: auto>
		<el-card shadow="hover" >
			<div class="system-menu-search mb15">
				<el-input size="small" v-model="searchValue" placeholder="请输入订单号/会员名/会员编号" style="max-width: 250px"> </el-input>
				<el-button size="small" type="primary" class="ml10"  @click="searchButton">
					<el-icon>
						<elementSearch />
					</el-icon>
					查询
				</el-button>
				<el-button size="small" type="success" class="ml10" @click="onOpenAddMenu">
					<el-icon>
						<elementFolderAdd />
					</el-icon>
					新增订单
				</el-button>
			</div>
			<el-table  :data="orderList" style="width: 100%" row-key="path">
				<el-table-column label="订单编号"  show-overflow-tooltip  >
					<template #default="scope">
						<span class="ml10">{{ scope.row.orderId }}</span>
					</template>
				</el-table-column>
				<el-table-column label="买家"  show-overflow-tooltip  >
					<template #default="scope">
						<span class="ml10">{{ scope.row.buyerName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="买家电话"  show-overflow-tooltip  >
					<template #default="scope">
						<span class="ml10">{{ scope.row.buyerMobile }}</span>
					</template>
				</el-table-column>
				<el-table-column label="买家地址"  show-overflow-tooltip  >
					<template #default="scope">
						<span class="ml10">{{ scope.row.buyerAddress }}</span>
					</template>
				</el-table-column>
				<el-table-column label="订单金额"  show-overflow-tooltip  >
					<template #default="scope">
						<span class="ml10">{{ formatPrice(scope.row.orderAmount) }}</span>
					</template>
				</el-table-column>
				<!-- 订单支付状态,（0未支付，1已支付） ({{scope.row.payStatus}}})-->
				<el-table-column label="支付状态"  show-overflow-tooltip >
					<template #default="scope"> 
						<el-tag type="info" size="large" v-if="scope.row.payStatus==0">{{patStatusENUM(scope.row.payStatus)}}</el-tag>
						<el-tag type="success" size="large" v-else-if="scope.row.payStatus==1">{{patStatusENUM(scope.row.payStatus)}}</el-tag>
						<el-tag type="warning" size="large" v-else-if="scope.row.payStatus==2">{{patStatusENUM(scope.row.payStatus)}}</el-tag>
						<el-tag type="danger" size="large" v-else>{{patStatusENUM(scope.row.payStatus)}}</el-tag>
					</template> 
				</el-table-column>


				<el-table-column label="操作" show-overflow-tooltip >
					<template #default="scope">
						<el-button size="mini" type="text" @click="onOpenOrderDetails(scope.row)">订单详情</el-button>
					</template>
				</el-table-column> 

				<!-- 
				<el-table-column label="操作" show-overflow-tooltip >
					<template #default="scope">
						<el-button size="mini" type="text" @click="onOpenAddMenu(scope.row)">新增商品</el-button>
						<el-button size="mini" type="text" @click="onOpenEditMenu(scope.row)">修改</el-button>
						<el-button size="mini" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>
		</el-card>

		<!-- 分页组件 start -->
		<el-pagination
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			class="mt15"
			:pager-count="5"
			:page-sizes="[10, 20, 30]"
			v-model:current-page="tableData.param.pageNum"
			background
			v-model:page-size="tableData.param.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="tableData.total"
		>
		</el-pagination>
		<!-- 分页组件 end -->

		<OrderDetails ref="orderDetailsRef" />

	</div>

</template>

<script lang="ts">

// import {  } from '@vue/reactivity'
import {toRaw ,toRefs, reactive, computed, onMounted, ref } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { ElMessageBox, ElMessage } from 'element-plus'; // 页面提示消息
import OrderDetails from './componet/orderdetail.vue';
 import { useStore } from '/@/store/index';

import {sellerOrderList} from '/@/api/order/sellerorder.ts';

// 模拟数据
import { simulateOrderList } from './mock.ts';

export default {
	name: 'sellerOrder',
	components: { OrderDetails},
	setup() {
		const orderDetailsRef = ref();
		const store = useStore();
		const state = reactive({
			orderList: [],
			tableData: {
				data: [],
				total: 0,
				loading: false,
				param: {
					pageNum: 1,
					pageSize: 10,
				},
			},
		});

		// 页面查询按钮值
		const searchValue = ref('');

		// 页面加载时调用该方法
		onMounted(() => {
			// state.orderList = simulateOrderList;
			initTableData();
		});

		// 新增订单页面
		const onOpenAddMenu = () => {};

		// 订单详情
		const onOpenOrderDetails = (row: any) => {
			console.log(row);
			console.log("==========================");
			// console.log(sta);
			let list = toRaw(row);
			console.log(list);
			orderDetailsRef.value.openDialog(list);
		};

		// 控制返回的价格格式化显示
		const formatPrice = (row: Number) => {
			return (typeof row === 'undefined') ? '￥0.00' : '￥'+row;
		};

		// 处理订单状态显示枚举
		const patStatusENUM = (row: Number) => {
			console.log(typeof row);
			// 数据为空
			switch (row) {
				case 0:
					return '未支付';
					break;
				case 1:
					return '已支付';
					break;
				case 2:
					return '已取消';
					break;
				default:
					return '未知';
			}
		};

		//  --------------------------------
			// 初始化表格数据
		const initTableData = () => {
			let sellerId :string = store.state.userInfos.userInfos.id;
			let	page :number =  state.tableData.param.pageNum;
			let	size :number = state.tableData.param.pageSize;
			// toRaw(searchValue)获取的是包装的对象，。vlue就是里面的值
			let condition  = toRaw(searchValue).value; 
			
			//  let condition  = '';
			console.log(condition);
			sellerOrderList(sellerId, page, size, condition)	
				.then((res:any) =>{

					// console.log(res);
					let pageResult = res.data.pageResult;
					state.tableData.param.pageNum = pageResult.current;
					state.tableData.param.pageSize = pageResult.size;
					state.tableData.total = pageResult.total;
					state.orderList = pageResult.records;
				})
				.catch((err:any) =>{

				})
			
		};


		// 分页改变 页面大小改变
		const onHandleSizeChange = (val: number) => {
			state.tableData.param.pageSize = val;
			initTableData();
		};
		// 分页改变 页面数改变
		const onHandleCurrentChange = (val: number) => {
			state.tableData.param.pageNum = val;
			initTableData();
		};

		// 查询
		const  searchButton = ()=> {
			initTableData();
		};

		return {
			searchButton, // 查询
			// 分页
			onHandleSizeChange,
			onHandleCurrentChange,
			initTableData,
			store,
			orderDetailsRef, 
// OrderDetails,
			searchValue,
			onOpenAddMenu,
			onOpenOrderDetails, // 展示订单详情
			patStatusENUM, // 订单支付状态
			formatPrice, // 显示价格

			...toRefs(state), // 响应式数据绑定
		};
	},
};
</script>